<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.promise使用
        // then
        const promise = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('success')
            }, 1000)
        })
        const promise2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('error')
            }, 1000)
        })
        // catch
        promise.then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
        promise2.then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })
        // finally
        promise.then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        }).finally(() => {
            console.log('finally')
        })
        // 2.promise.all
        // Promise.all 方法接受一个 Promise 对象的数组，并返回一个新的 Promise 对象。
        // 只有数组中所有的 Promise 对象都成功，返回的 Promise 对象才会成功；
        // 只要有一个 Promise 对象失败，返回的 Promise 对象就会失败，而且是最先失败的 Promise 对象的失败原因。
        const p1 = Promise.resolve(1)
        const p2 = 42
        const p3 = new Promise((resolve, reject) => {
            setTimeout(resolve, 100, 'foo');
        });
        Promise.all([p1, p2, p3]).then((values) => {
            console.log(values); // [1, 42, "foo"]
        });
        // 3.promise.race
        // Promise.race 方法接受一个 Promise 对象的数组，并返回一个新的 Promise 对象。
        // 一旦数组中的任何一个 Promise 对象解决或拒绝，新的 Promise 对象就会解决或拒绝，并返回第一个解决或拒绝的原因。
        const pro1 = new Promise((resolve, reject) => {
            setTimeout(resolve, 500, 'one');
        });

        const pro2 = new Promise((resolve, reject) => {
            setTimeout(resolve, 100, 'two');
        });

        Promise.race([pro1, pro2]).then((value) => {
            console.log(value); // 输出: two
        });
        // 4.Promise.allSettled
        // Promise.allSettled 方法接受一个 Promise 对象的数组，并返回一个新的 Promise 对象。
        // 只有当数组中的所有 Promise 对象都解决或拒绝后，返回的 Promise 对象才会解决，并且返回一个包含每个 Promise 对象结果的数组。
        Promise.allSettled([p1, p2, p3]).then((results) => {
            results.forEach((result) => {
                console.log(result.status, result.value);
            });
        });
    </script>
</body>

</html>